<template>
  <main-tpl>
    <template #main>
      <div class="video-list">
        <div class="video-list-button">
          <a-button type="primary" @click="add">新增</a-button>
          <a-button style="margin-left: 8px" type="primary" @click="init">刷新</a-button>
        </div>
        <div class="video-list-table">
          <a-table
            class="margin-top-16"
            :dataSource="dataList"
            :pagination="pagination"
            :columns="columns"
            size="middle"
            @change="tableChange"
            :loading="loading"
          >
            <template #bodyCell="{ column, record }">
              <template v-if="column.key === 'operation'">
                <a-button type="link" @click="autoProduce(record)" :loading="btnLoading"
                  >一键生成</a-button
                >
                <a-button style="margin-left: 12px" type="link" @click="checkProduce(record)"
                  >手动生成</a-button
                >
                <a-button
                  style="margin-left: 12px"
                  danger
                  type="link"
                  @click="deleteNumberEntry(record)"
                  >删除</a-button
                >
              </template>
            </template>
          </a-table>
        </div>
        <NumberEntryAddModal
          :modalVisible="modalVisible"
          @submit="handleSubmit"
          @cancel="handleCancel"
        ></NumberEntryAddModal>
        <VideoProduceModal
          :modalVisible="produceModalVisible"
          :detail="produceDetail"
          @submit="handleProduceSubmit"
          @cancel="handleProduceCancel"
        ></VideoProduceModal>
      </div>
    </template>
  </main-tpl>
</template>
<script>
import tablePagination from "@/composables/tablePagination";
import { onMounted, reactive, toRefs } from "vue";
import NumberEntryAddModal from "./components/NumberEntryAddModal";
import VideoProduceModal from "./components/VideoProduceModal";
import { message } from "ant-design-vue";
import { getPlayerList, clipsVideoTask } from "@/api/marathon";
import { downloadFile } from "@/api/common";

const columns = [
  {
    title: "id",
    dataIndex: "id",
    key: "id",
    width: 50,
  },
  {
    title: "号码牌号",
    dataIndex: "name",
    key: "name",
  },
  {
    title: "操作",
    dataIndex: "operation",
    key: "operation",
    width: 250,
  },
];

export default {
  name: "VideoList",
  components: {
    NumberEntryAddModal,
    VideoProduceModal,
  },
  setup() {
    const init = () => {
      getList();
    };

    const state = reactive({
      loading: false,
      ...tablePagination(init), //pagination tableChange
      modalVisible: false,
      produceModalVisible: false,
      dataList: [],
      produceDetail: {},
      btnLoading: false,
    });

    onMounted(() => {
      init();
    });

    const getList = () => {
      state.loading = true;
      const dto = {
        pageNumber: state.pagination?.current,
        pageSize: state.pagination?.pageSize,
      };
      getPlayerList(dto).then((res) => {
        if (res.result === true) {
          let { responseList = [], total } = res?.data;
          state.dataList = responseList;
          state.pagination.total = total;
        } else {
          message.error("获取号码列表失败：" + res.message);
        }
        state.loading = false;
      });
    };
    const handleCurrentChange = (val) => {
      state.pagination.current = val;
      getList();
    };

    const deleteNumberEntry = (record) => {
      console.log(record);
      message.warn("功能暂未实现");
    };

    const add = () => {
      state.modalVisible = true;
    };

    const handleCancel = () => {
      state.modalVisible = false;
    };

    const handleSubmit = () => {
      handleCurrentChange(1);
    };

    const autoProduce = (record) => {
      state.loading = true;
      const dto = {
        playerId: record.id,
        type: 2,
      };
      clipsVideoTask(dto)
        .then((res) => {
          if (res.result && res.code !== 400) {
            downloadMethod(res.data);
            message.success("生成成功，请查看浏览器下载");
          } else {
            message.error("生成失败: " + res.msg);
          }
          state.loading = false;
        })
        .catch(() => {
          message.error("生成结果下载失败");
          state.loading = false;
        });
    };

    const downloadMethod = (path) => {
      const url = downloadFile(path);
      const lastIndex = path.lastIndexOf("/") + 1;
      const fileName = path.substring(lastIndex);
      const xhr = new XMLHttpRequest();
      xhr.open("GET", url, true);
      xhr.responseType = "blob";
      xhr.onload = () => {
        const u = window.URL.createObjectURL(xhr.response);
        let a = document.createElement("a");
        a.href = u;
        a.download = fileName;
        a.click();
        a.remove();
      };
      xhr.send();
    };

    const checkProduce = (record) => {
      state.produceModalVisible = true;
      state.produceDetail = record;
    };

    const handleProduceCancel = () => {
      state.produceModalVisible = false;
      state.produceDetail = {};
    };

    const handleProduceSubmit = (data) => {
      state.produceDetail = {};
      if (data) {
        downloadMethod(data);
      }
      handleCurrentChange(1);
    };

    return {
      ...toRefs(state),
      columns,
      deleteNumberEntry,
      add,
      handleSubmit,
      handleCancel,
      init,
      autoProduce,
      checkProduce,
      handleProduceSubmit,
      handleProduceCancel,
    };
  },
};
</script>
<style lang="scss" scoped>
.video-list {
  height: 100%;
}
</style>
